$(function(){
			// 点击小图切换大图
			$.each($('.small img'),function(){
				$(this).on('click',function(){
					//动态改变中等图和大图.导入图片的方式根据小图对应的index值，将中等图和大图的src进行替换
					$('.middle img').attr({
						src:$(this).attr('src')
					});
					$('.big img').attr({
						src:$(this).attr('src')
					});
					// 当前点击的添加样式属性
					$(this).addClass('bor').siblings().removeClass('bor');
				});
			});
 
 
			// 初始化
			var middleWidth = $('.middle').width(),
				middleHeight = $('.middle').height(),
				popWidth = $('.pop').width(),
				popHeight = $('.pop').height();
 
			// 鼠标移入图片显示放大镜以及放大后的图片,移出则消失
			$('.middle').hover(function(){
				$('.pop,.big').fadeIn();
			},function(){
				$(".pop,.big").fadeOut();
			}).on('mousemove',function(event){//鼠标移动时
 
				// 计算出遮罩在整个文档中的绝对定位位置(即光标在遮罩中心的位置)
				var _left = event.pageX - popWidth/2,
					_top = event.pageY - popHeight/2;
				$('.pop').offset({
					"left":_left,
					"top":_top
				});
				// 获取遮罩相对于.middle的定位
				_left = $('.pop').position().left;
				_top = $('.pop').position().top;
				// 判断是否越界
				if(_left<0){
					_left = 0;
				}else if(_left > middleWidth - popWidth){
					_left = middleHeight - popWidth;
				}
				if(_top<0){
					_top = 0;
				}else if(_top > middleHeight -popHeight){
					_top = middleHeight - popWidth;
				}
				// 重新设定定位位置
				$(".pop").css({
					"left":_left,
					"top":_top
				});
				// 放大镜效果:big盒子中的图片安比率移动位置
				$('.big img').css({
					'top': -2*_top,
					"left": -2*_left
				});
			});
		});